<template>
  <div class="home">
    <div class="header">
      <h3 style="color:#fff;">雾桐</h3>
      <el-dropdown>
        <span style="color:#fff;cursor: pointer;">
          <i class="iconfont icon-yonghu"></i>
          <span class="margin-left-10">{{$store.state.app.userInfo.userName || '匿名用户'}}</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="passwordDialog = true">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-row style="height:calc(100vh - 60px)">
      <el-col :span="4"
              style="height:100%">
        <el-menu :default-active="currentRoute"
                 style="height:100%"
                 :router="true"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose">
          <el-menu-item index='/shangHu'>
            <span slot="title">商户管理</span>
          </el-menu-item>
          <el-menu-item index="/keHu">
            <span slot="title">客户管理</span>
          </el-menu-item>
          <el-menu-item index="/ziXun">
            <span slot="title">资讯管理</span>
          </el-menu-item>
          <el-menu-item index="/coupon">
            <span slot="title">优惠券管理</span>
          </el-menu-item>
          <el-menu-item index="/dictionary">
            <span slot="title">字典管理</span>
          </el-menu-item>
          <el-menu-item index="/product">
            <span slot="title">产品管理</span>
          </el-menu-item>
          <el-menu-item index="/yanGan">
            <span slot="title">烟杆商品管理</span>
          </el-menu-item>
          <el-menu-item index="/yanDan">
            <span slot="title">烟弹商品管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20"
              class="right-content">
        <router-view></router-view>
      </el-col>
    </el-row>

    <!-- 修改密码 -->
    <el-dialog title="修改密码"
               :close-on-click-modal="false"
               :visible.sync="passwordDialog"
               width="500">
      <el-form :model="passwordForm"
               :rules="passwordRules"
               ref="editKeHuForm"
               label-width="110px">
        <el-form-item label="原密码"
                      prop="password">
          <el-input v-model="passwordForm.password"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码"
                      prop="newPassword">
          <el-input v-model="passwordForm.newPassword"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item label="再次确认密码"
                      prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword"
                    type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="passwordDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { logout, updateUserPassWord } from '../../services/services_user'
export default {
  name: "Home",
  components: {

  },
  mixins: [],
  props: {},
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      passwordDialog: false,
      passwordForm: {
        confirmPassword: '',
        newPassword: '',
        password: '',
      },
      passwordRules: {
        confirmPassword: [
          { required: true, validator: validatePass, trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入账户新密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入账户原密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],

      }
    }
  },
  created: function () {

  },
  mounted: function () {

  },
  computed: {
    ...mapState('app', ['currentRoute'])
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出登录
    async logout () {
      const res = await logout()
      if (res.code == 0) {
        this.$message.success('退出成功')
        this.$router.replace('/login')
      }
    },
    async onSubmit () {
      const data = { ...this.passwordForm }
      data.confirmPassword = window.btoa(data.confirmPassword)
      data.newPassword = window.btoa(data.newPassword)
      data.password = window.btoa(data.password)

      const res = await updateUserPassWord(data)
      if (res.code == 0) {
        this.$message.success('修改成功')
        this.$router.replace('/login')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #597da5;
    height: 60px;
  }

  .right-content {
    padding: 6px 10px 0px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
  }
}
</style>
